<template>
  <el-dialog :visible.sync="value" :before-close="() => $emit('input', false)">
    <template slot="title">
      拒绝补单
    </template>
    <el-table border :data="[rowData]" v-if="!rowData.sucReqTime">
      <el-table-column label="充值时间" prop="amount">
        <template slot-scope="{row}">
          <div>{{row.createDate | toTime}}</div>
        </template>
      </el-table-column>
      <el-table-column label="第三方充值单号" prop="thirdOrderId">
      </el-table-column>
      <el-table-column label="账户名" prop="username">
      </el-table-column>
      <el-table-column label="存款金额" prop="amount"></el-table-column>
      <el-table-column label="补单金额" prop="amount">
        <template slot-scope="{row}">
         {{form.amount}}
        </template>
      </el-table-column>
    </el-table>
    <div v-if="!!rowData.sucReqTime">
      <div>申请信息</div>
      <el-table border :data="[rowData]" v-if="rowData.sucReqTime">
        <el-table-column label="补单申请时间" prop="sucReqTime">
          <template slot-scope="{row}">
            {{ row.sucReqTime | toTime}}
          </template>
        </el-table-column>
        <el-table-column label="申请人" prop="sucReqOperator"></el-table-column>
        <el-table-column label="审请补单金额" prop="sucReqAmount"></el-table-column>
      </el-table>
    </div>
    <el-form :model="rowData" ref="refForm" :rules="rules">
      <div>备注</div>
      <el-form-item prop="sucReqRemark">
        <el-input type="textarea" v-model.trim="rowData.sucReqRemark" :disabled="!!rowData.sucReqTime"></el-input>
      </el-form-item>
    </el-form>
    <div v-if="rowData.sucApvOperator">
      <div>审核信息</div>
      <el-table border :data="[rowData]">
        <el-table-column label="审核时间" prop="sucApvTime">
          <template slot-scope="{row}">
            {{ row.sucApvTime | toTime}}
          </template>
        </el-table-column>
        <el-table-column label="审核人" prop="sucApvOperator"></el-table-column>
        <el-table-column label="审核补单金额" prop="sucApvAmount"></el-table-column>
      </el-table>
    </div>
    <div slot="footer" class="dialog-footer" v-if="!rowData.sucReqTime">
      <el-button @click="rowData.sucReqRemark='';$emit('input', false)" :loading="loading">取 消</el-button>
      <el-button type="primary" @click="doSave({action: 'saveForm', form: 'refForm'})" :loading="loading">确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>

// services
import { refusedSingleReorder } from '@/services/api/recharge';

// mixins
import { form } from '@/build';

export default {
  name: 'apply-reorder-dialog',
  props: ['value', 'id', 'rowData'],
  mixins: [form],
  data() {
    return {
      form: {
        id: this.id,
        applyComment: undefined,
        amount: this.rowData.amount,
      },
      rules: {
        sucReqRemark: {
          required: true,
          message: '拒绝补单备注为必填项',
        },
      },
    };
  },
  methods: {},
  mounted() {
    this.bindSave(refusedSingleReorder, 'saveForm', 'rowData', {
      beforeSend: (data) => {
        const { orderId, sucReqRemark } = data;
        return { orderId, remark: sucReqRemark };
      },
      afterSuccess: () => {
        this.$emit('input', false);
        this.$parent.gridSearch();
      },
    });
  },
};
</script>

<style scoped>
</style>
